<template>
	<div>
		<div id="content">
			<select v-model="currentRole">
				<option value="0">请选择角色</option>
				<option v-for="role in roles" :value="role.roleId" v-text="role.roleName"></option>
			</select>
			<div>
				<div id="menu">
					<!--一级菜单-->
					<div v-for="m1 in menus1">
						<div class="menu">
							<input v-model="permission" type="checkbox" :value="m1.permissionId">
							<span>{{m1.permissionName}}</span>
						</div>
						<br />
						<div class="l2" v-for="m2 in m1.children">
							<div class="menu">
								<input v-model="permission" type="checkbox" :value="m2.permissionId">
								<span>{{m2.permissionName}}</span>
							</div>
						</div>
						<br />
					</div>
				</div>
			</div>
			<div style="float: left;width: 60%;margin-top: 50px;">
				<div style="float: right;">
					<el-button type="primary" @click="sout();updatePemissionRole()" round>提交</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				currentRole: '0',
				roles: [],
				permission: [],
				menus1: [],
				updatePer:[]
			}
		},
		methods: {
			selectAllRoles: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/role/selectRoles",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					success: function(data) {
						_this.roles = data.list;
					}
				})
			},
			selectAllPermission: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/permission/getAll",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					success: function(data) {
						_this.menus1 = data.list;
					}
				})
			},
			selectPermissionByRoleId: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/permission/getPermissionByRole",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					data:{"roleId":_this.currentRole},
					dataType:"json",
					success: function(data) {
						_this.permission = data.obj;
					}
				})
			},
			// choose:function(event){
			//     var currentCheckbox=event.target;//点击的这个多选框对象
			//     var c = $(currentCheckbox).prop("checked");
			//     if(c){
			//       var e1= $(currentCheckbox).parent().parent().prevAll("div").children("input");
			//       for(var i = 0;i < e1.length;i++){
			// 		  this.permission.push($(e1[i]).attr("value"));
			// 	  }
			//       var e2=e1.parent().parent().prevAll("div").children("input");
			//       for(var i = 0;i < e2.length;i++){
			//       					  this.permission.push($(e2[i]).attr("value"));
			//       }
			//     }else{
			//       $(currentCheckbox).parent().nextAll("div").find("input");
			//     }
			//   },
			sout:function(){
				console.log(this.permission);
				console.log(this.currentRole);
			},
			updatePemissionRole:function(){
				var _this = this;
				for(var i = 0; i < _this.permission.length; i++){
					_this.updatePer.push(_this.permission[i]);
				}
				$.ajax({
					url:"http://localhost/permission/update",
					type:"post",
					data:{"roleId":_this.currentRole,"list":_this.updatePer},
					headers: {
						"token": localStorage.getItem("token")
					},
					dataType:"json",
					success:function(data){
						alert(data.message);
					}
				})
			}
		},
		created: function() {
			this.selectAllRoles();
			this.selectAllPermission();
		},
		watch: {
			currentRole: {
				handler: function(n,o) {
					this.selectPermissionByRoleId();
				},
				deep: true
			}
		}
	}
</script>

<style scoped="scoped">
	.menu {
		float: left;
		margin-left: 20px;
	}

	.l2 {
		float: left;
		margin-left: 40px;
	}
</style>
